<template>
  <el-row class='table-operation-buttons-container' ref='operate'>
    <el-col :span='24'>
      <el-button type='success' size='small' icon='el-icon-plus' :loading='loading' :disabled='checking'
                 @click='newButton.event' v-if='!noNew'>新建
      </el-button>

      <el-popover class='deletePopover' placement='top' width='160' v-model='deleteVisible'>
        <p>确认将已选择的{{ deleteBtn.length }}条数据删除吗？</p>
        <div style='text-align: right; margin: 0'>
          <el-button size='mini' type='text' @click='deleteVisible = false'>取消</el-button>
          <el-button type='primary' size='mini' :loading='loading' @click='
              deleteVisible = false;
              deleteButton.event();
            '>确认
          </el-button>
        </div>
        <el-button slot='reference' type='danger' icon='el-icon-delete' size='small' :loading='loading'
                   :disabled='checking||!deleteBtn.length'>批量删除({{ deleteBtn.length }})
        </el-button>
      </el-popover>

      <el-button type='primary' icon='el-icon-receiving' size='small' :loading='loading'
                 :disabled='checking|| improtUrlDisabled' @click='selectFile($event)' v-if='improtUrl'>导入
      </el-button>
      <input type='file' name='' id='uploadEventFile' style='display:none' @change='getFile($event)' v-if='improtUrl'
             accept='.json, application/json, text/json'>

      <el-popover class='Popover' placement='top' width='160' v-model='exportVisible'>
        <p>确定要下载一个excel文件吗？</p>
        <div style='text-align: right; margin: 0'>
          <el-button size='mini' type='text' @click='exportVisible = false'>取消</el-button>
          <el-button type='primary' size='mini' :loading='loading' @click='handelExportCSV();'>确认</el-button>
        </div>
        <el-button slot='reference' type='primary' icon='el-icon-paperclip' size='small' :loading='loading'
                   :disabled='checking|| exportUrlDisabled' v-if='exportUrl'>导出
        </el-button>
      </el-popover>

      <el-switch v-model='checking' active-color='#13ce66' inactive-color='gray' active-text='正在监控'
                 inactive-text='停止监控' v-if='!noChecking' @change='changeChcek(checking)'></el-switch>

      <!-- <el-button v-if="testButton" icon="el-icon-s-operation" :type="testBtn.clicked ? 'success':''" size="small" :loading="loading" @click="testButton.event">测试当前页</el-button> -->
    </el-col>
  </el-row>
</template>

<script>
import { exportCSV, uploadFile } from '@/api/request';

export default {
  name: 'TableOperationButtons',
  data() {
    return {
      timer: undefined,
      checking: false,
      checkingMessage: {},
      deleteVisible: false,
      exportVisible: false,
      newBtn: {},
      deleteBtn: {},
      importBtn: {},
      exportBtn: {},
      testBtn: {},
    };
  },
  props: {
    loading: Boolean,
    pageName: String,
    newButton: Object,
    deleteButton: Object,
    importButton: Object,
    exportButton: Object,
    testButton: Object,
    noNew: Boolean,
    improtUrl: String,
    exportUrl: String,
    noChecking: Boolean,
    improtUrlDisabled: Boolean,
    exportUrlDisabled: Boolean,
  },
  components: {},
  computed: {},
  mounted() {
    const operate = this.$refs.operate.$el.offsetHeight;
    this.$store.commit('setHeight', {
      operate,
    });
  },
  methods: {
    selectFile(event) {
      event.preventDefault();
      document.querySelector('#uploadEventFile')
        .click();
    },
    getFile(event) {
      this.$parent.loading = true;
      const file = event.target.files[0];
      uploadFile(this.improtUrl, file)
        .then((res) => {
          console.log('res:', res);
          this.$message({
            message: res.data.msg,
            type: res.data.status === 200 ? 'success' : 'error',
          });
          // 刷新父组件数据
          if (res.status === 200) {
            this.$parent.getData();
          }
        })
        .catch((error) => {
          this.$message.error(error.message || '发生了网络错误');
        })
        .finally(() => {
          this.$parent.loading = false;
        });
    },
    // 改变监控状态
    changeChcek(status) {
      if (status) {
        this.checkingMessage = this.$message({
          message: '监控状态下不能操作表格数据',
          type: 'warning',
          // duration: 999999,
        });
      }
    },
    // 导出下载文件
    handelExportCSV() {
      exportCSV(this.exportUrl)
        .then((res) => {
          if (res && res.data) {
            const { data } = res;
            const result = JSON.stringify(data, null, 2);
            console.log(result);
            const blob = new Blob([result], {
              type: 'text/json;charset=utf-8;',
            });
            const filename = res.fileName || '导出数据';
            if (navigator.msSaveBlob) {
              // IE 10+
              navigator.msSaveBlob(blob, filename);
            } else {
              const link = document.createElement('a');
              if (link.download !== undefined) {
                // feature detection
                // Browsers that support HTML5 download attribute
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', filename);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
              }
            }
            this.$message({
              message: '导出数据成功',
              type: 'success',
            });
          }
        });
      this.exportVisible = false;
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch: {
    deleteButton: {
      handler(newVal) {
        this.deleteBtn = newVal;
      },
      deep: true,
    },
    testButton: {
      handler(newVal) {
        this.testBtn = newVal;
      },
      deep: true,
    },
    checking: {
      handler(val) {
        this.$parent.checking = val;
        if (val) {
          this.timer = setInterval(() => {
            this.$parent.getData(true);
          }, 1000);
        } else {
          clearInterval(this.timer);
        }
      },
    },
  },
};
</script>

<style scoped lang='scss'>
.table-operation-buttons-container {
  padding: 1rem 0;

  button {
    margin: 0 1rem 0 0;
  }

  .import-btn {
    display: inline-block;
  }
}
</style>
